<template>
    <ul id="chat-list" class="m-chat-list p-chat-list">
        <li class="loadmore" v-if="canLoadMore" @click="loadMore">---- 点击加载更多 ----</li>
        <li class="cannot-loadmore" v-else>---- 已无更多记录 ----</li>
        <chat-item
            v-for="(msg, index) in msglist"
            :type="type"
            :content="msg.body"
            :cTime="msg.createTime"
            :direction="msg.chatDirection"
            :userInfos="userInfos"
            :myInfo="myInfo"
            :imgs="msg.fileUrls"
            :key="index"
            :ind="index"
            @titlestyle="titlestyle"
            @msg-loaded="msgLoaded"
            @showHealthInfo="showHealthInfo"
        ></chat-item>
    </ul>
</template>
<script type="text/javascript">
import emojiObj from "@/configs/emoji";
import ChatItem from "./p2pChatItem2";

export default {
    data(){
        return {
            pageNo:1,
            msgLoadedTimer: null
        }
    },
    components: {
        ChatItem
    },
    props: {
        type: String, // 类型，chatroom, session
        canLoadMore: [String, Boolean],
        msglist: {
            type: Array,
            default() {
                return [];
            }
        },
        userInfos: {
            type: Object,
            default() {
                return {};
            }
        },
        myInfo: {
            type: Object,
            default() {
                return {};
            }
        }
    },
    methods: {
        msgLoaded() {
            clearTimeout(this.msgLoadedTimer);
            this.msgLoadedTimer = setTimeout(() => {
                this.$emit("msgs-loaded");
            }, 20);
        },
        loadMore(){
            this.$emit("loadMore",true);
        },
        titlestyle(val){
            this.$emit("titlestyle",val)
        },
        showHealthInfo(id,source){
            this.$emit("showHealthInfo",id,source);
        }
    },
    watch: {
        msglist(n) {
            console.log(n);
        }
    }
};
</script>

<style lang="less" type="text/css">
.m-chat-list{
    position: relative;
    display: block;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 1rem 2%;
    width: 100%;
    height:100%;
    overflow-y: auto;
    overflow-x: hidden;
}
.p-chat-list {
    .loadmore{
        font-size: 12px;
        cursor: pointer;
        text-align:center;
        margin-bottom:20px;
        color:#1ca2ff;
    }
    .cannot-loadmore{
        font-size: 12px;
        text-align:center;
        margin-bottom:20px;
        color:#999999;
    }
}
</style>
<style lang="less">
    .u-msg:last-child{
        margin-bottom:0;
    }
</style>